<template>
  <div class="page-box">
    <div>
      <TopBanner/>
      <div class="top-group">
        <ul class="group-box">
          <li v-for="(item, index) in showTypeList" @click="handleClickSelectType(index)">
            <div style="margin-bottom:0.2rem;">
              <img :src="item.img" alt="">
            </div>
            <div>
              {{item.title}}
            </div>
          </li>
        </ul>
      </div>
      <div style="padding-top:0.3rem;padding-bottom:1rem;">
        <div>
          <nut-infiniteloading
            @loadmore="onInfinite"
            :is-show-mod="true"
            :has-more="hasMore"
            :is-loading="isLoading"
            :threshold="200"
          >
            <ul class="list">
              <li v-if="[0,1,5].indexOf(item.type)>=0" class="list-item" v-for="(item, index) in data" :key="item.id">
                <nut-row v-if="item.type == 1" type="flex" gutter="10" align="left">
                  <nut-col :span="7" style="margin-bottom:0.2rem;text-align: center;border-right:thin solid #efefef;margin-right:0.5rem;">
                    <dl>
                      <dt style="padding:0.5rem;">{{item.type_text}}</dt>
                      <dd style="margin-bottom:0.2rem;" v-if="img_arr[item.type]">
                        <img @click="handleClickReview(item)" class="task-img" :src="img_arr[item.type]" alt="">
                      </dd>
                      <dd class="task-level">{{item.scope}}</dd>
                    </dl>
                  </nut-col>
                  <nut-col :span="17" style="margin-bottom:0.2rem;padding-top:0.5rem;">
                    <ul>
                      <li>{{ $t('TaskPage.xqf') }}: {{item.from}} <span class="payed">{{ $t('TaskPage.yfk') }}</span></li>
                      <li class="price-box">
                        <span class="price">{{item.single_reward}}{{ $t('TaskPage.y') }}</span>
                        <span class="remain_cnt">{{ $t('TaskPage.sy') }}: <b>{{item.remain}}</b></span>
                        <span @click="handleClickJob(item.id,index)" class="btn-join btn-yellow">{{ $t('TaskPage.lq') }}</span>
                      </li>
                      <li style="margin-bottom:0.3rem;">{{ $t('TaskPage.yq') }}:{{item.desc}}</li>
                    </ul>
                  </nut-col>
                </nut-row>
                <nut-row v-else-if="item.type == 5" type="flex" gutter="10" align="left">
                  <nut-col :span="7" style="margin-bottom:0.2rem;text-align: center;border-right:thin solid #efefef;margin-right:0.5rem;">
                    <dl>
                      <dt style="padding:0.5rem;">{{item.type_text}}</dt>
                      <dd style="margin-bottom:0.2rem;" v-if="img_arr[item.type]">
                        <img class="task-img" :src="img_arr[item.type]" alt="">
                      </dd>
                      <dd class="task-level">{{item.scope}}</dd>
                    </dl>
                  </nut-col>
                  <nut-col :span="17" style="margin-bottom:0.2rem;padding-top:0.5rem;">
                    <ul>
                      <li>{{ $t('TaskPage.xqf') }}: {{item.from}} <span class="payed">{{ $t('TaskPage.yfk') }}</span></li>
                      <li class="price-box">
                        <span class="price">{{item.single_reward}}{{ $t('TaskPage.y') }}</span>
                        <span class="remain_cnt">{{ $t('TaskPage.sy') }}: <b>{{item.remain}}</b></span>
                        <span @click="handleClickJob(item.id,index)" class="btn-join btn-yellow">{{ $t('TaskPage.lq') }}</span>
                      </li>
<!--                      <li style="margin-bottom:0.3rem;">{{item.title}}</li>-->
                      <li style="padding-top:0.2rem;">
                        <span @click="handleClickViewDesc(item.desc)" class="view-desc">👀{{ $t('TaskPage.ckjtyq') }}</span>
                      </li>
                    </ul>
                  </nut-col>
                </nut-row>
                <nut-row v-else-if="item.type == 0" type="flex" gutter="10" align="left">
                  <nut-col :span="7" style="margin-bottom:0.2rem;text-align: center;border-right:thin solid #efefef;margin-right:0.5rem;">
                    <dl>
                      <dt style="padding:0.5rem;">{{item.type_text}}</dt>
                      <dd style="margin-bottom:0.2rem;" v-if="img_arr[item.type]">
                        <img @click="handleClickReview(item)" class="task-img" :src="img_arr[item.type]" alt="">
                      </dd>
                      <dd class="task-level">{{item.scope}}</dd>
                    </dl>
                  </nut-col>
                  <nut-col :span="17" style="margin-bottom:0.2rem;padding-top:0.5rem;">
                    <ul>
                      <li>{{ $t('TaskPage.xqf') }}: {{item.from}} <span class="payed">{{ $t('TaskPage.yfk') }}</span></li>
                      <li class="price-box">
                        <span class="price">{{item.single_reward}}{{ $t('TaskPage.y') }}</span>
                        <span class="remain_cnt">{{ $t('TaskPage.sy') }}: <b>{{item.remain}}</b></span>
                        <span @click="handleClickJob(item.id,index)" class="btn-join btn-yellow">{{ $t('TaskPage.lq') }}</span>
                      </li>
                      <li style="padding-top:0.2rem;">
                        {{item.title}}
                      </li>
                    </ul>
                  </nut-col>
                </nut-row>
              </li>
            </ul>
          </nut-infiniteloading>
        </div>
      </div>
      <nut-popup :overlay="false" style="height:100%;" position="bottom" closeable close-icon="cross" v-model="showReviewDialog">
        <div v-if="review_url" style="padding-top:2.6rem;height:100%;">
          <iframe  :src="review_url" width="100%" height="100%" frameborder="0"></iframe>
        </div>
      </nut-popup>
      <nut-popup :overlay="false" style="height:100%;" position="top" closeable close-icon="cross" v-model="showReviewMomentDialog">
        <div style="text-align: left;padding:1rem;">
          <div class="moment-text">{{reviewMoment.text}}</div>
          <div class="moment-imgs" v-if="reviewMoment.imgArr">
            <ul>
              <li v-for="item in reviewMoment.imgArr">
                <img :src="item.indexOf('http')>=0?item:$api_url.server+item" alt="">
              </li>
            </ul>
          </div>
        </div>
      </nut-popup>
      <nut-popup style="height:100%;" :overlay="false"  position="bottom" closeable close-icon="cross" v-model="showReviewDescDialog">
        <div class="review-box" v-html="review_desc">

        </div>
      </nut-popup>
    </div>
    <nut-picker
      :is-visible="showSelectType"
      :list-data="typeList"
      @confirm="callbackConfirmType"
      @close="callbackCloseType"
    >
    </nut-picker>
    <nut-picker
      :is-visible="showSelectScope"
      :list-data="scopeList"
      @confirm="callbackConfirmScope"
      @close="callbackCloseScope"
    >
    </nut-picker>
    <MainNav nav_index="2"/>
  </div>
</template>

<script>
import MainNav from "../components/MainNav";
import PullRefresh from "../components/PullRefresh.vue";
import TopBanner from "../components/TopBanner";
//let typeArr = ['全部', '微信','抖音','火山','微视','快手','其他' ];
//let scopeArr = ['所有会员', '普通会员'];

export default {
  name: 'TaskPage',
    components: {TopBanner, MainNav,PullRefresh},
    data () {
		let typeArr = [this.$t('TaskPage.qb'), this.$t('TaskPage.wx'),this.$t('TaskPage.dy'),this.$t('TaskPage.hs'),this.$t('TaskPage.ws'),this.$t('TaskPage.ks'),this.$t('TaskPage.qs') ];
		let scopeArr = [this.$t('TaskPage.syhy'), this.$t('TaskPage.pthy')];
    return {
        sel_group:'0',
        typeList: [typeArr],
        scopeList: [scopeArr],
        curr_scope:scopeArr[0],
        curr_type:typeArr[0],
        curr_scope_index:-1,
        curr_type_index:1,
        data: new Array(30),
        page: 0,
        num: 2,
        hasMore: true,
        isLoading: false,
        showSelectType: false,
        showSelectScope: false,
        isErr: false,
        timer: null,
        data:'',
        curr_index: -1,
        showReviewDialog: false,
        showReviewMomentDialog: false,
        review_url:'',
        showReviewDescDialog: false,
        review_desc:'',
        img_arr:[
            '/static/img/wechat.png',
            '/static/img/douyin.png',
            '/static/img/huoshan.jpg',
            '/static/img/weishi.jpg',
            '/static/img/kuaishou.jpeg',
            '/static/img/gift.png'
        ],
        showTypeList:[
            {
                title:this.$t('TaskPage.dy'),
                img: '/static/img/douyin.png'
            },
            {
                title:this.$t('TaskPage.wx'),
                img: '/static/img/wechat.png'
            },
            {
                title:this.$t('TaskPage.qt'),
                img: '/static/img/gift.png'
            },
        ],
        card_list:[],
        reviewMoment: {
            text:'',
            imgArr: []
        },
        isRefreshing: false,
    }
  },
    methods:{
        shiftTab(index){

        },
        onRefresh(){
          if(this.isLoading){
              return;
          }
          this.isRefreshing = true;
          this.initPage();
          this.getData();
        },
        onInfinite () {
            if(this.hasMore && !this.isLoading){
                this.page += 1;
                this.getData();
            }
        },
        fromItemGetIndex(arr,item){
            for(let i = 0; i < arr.length;i++){
                if(arr[i] == item){
                    return i;
                }
            }
            return 0;
        },
        callbackConfirmType(e){
            this.curr_type = e[0];
            this.curr_type_index = this.fromItemGetIndex(typeArr,this.curr_type);
            this.initPage();
            this.getData();
        },
        callbackConfirmScope(e){
            this.curr_scope = e[0];
            this.curr_scope_index = this.fromItemGetIndex(scopeArr,this.curr_scope);
            this.curr_scope_index -= 1;
            if (this.curr_scope_index > 0) {
                this.curr_scope_index = this.card_list[this.curr_scope_index-1].level;
            }
            this.initPage();
            this.getData();
        },
        initPage(){
            this.page = 0;
            this.hasMore = true;
            this.data = [];
        },
        handleClickSelectScope(){
            this.showSelectScope = true;
        },
        handleClickSelectType(index){
            switch(index){
                case 0:
                    this.curr_type_index = 1;
                    break;
                case 1:
                    this.curr_type_index = 0;
                    break;
                case 2:
                    this.curr_type_index = 5;
                    break;
                default:
                    this.curr_type_index = 1;
                    break;
            }
            this.curr_index = index;
            this.initPage();
            this.getData();
        },
        getCards(){
            this.$axios.get(this.$api_url.vip_cards).then((res)=>{
                this.card_list = res.data;
                scopeArr = [this.$t("TaskPage.syhy"), this.$t("TaskPage.pthy")];
                res.data.forEach((item)=>{
                    scopeArr.push(item.name)
                })
                this.scopeList = [scopeArr];
            })
        },
        getData(){
            let url = this.$api_url.task_list+"?page="+this.page;
            //let url = "https://js.99ms.net/api/v1/task/list"+"?page="+this.page;
            let args_arr = [];
            args_arr.push("type="+(this.curr_type_index));
            // if(this.curr_scope_index>=0){
            //     args_arr.push("scope="+this.curr_scope_index);
            // }
            if(args_arr.length>0){
                url+="&"+args_arr.join("&");
            }
            this.isLoading = true;
            this.$axios.get(url).then((res)=>{
                if(res.data.code == 0){
                    if(this.data.length == 0){
                        this.data = res.data.data;
                    } else{
                        this.data = this.data.concat(res.data.data);
                        console.log(this.data);
                    }
                } else{
                    this.hasMore = false;
                }
            }).catch((err)=>{
                this.$toast.fail(err.message)
            }).then(()=>{
                this.isLoading = false;
                this.isRefreshing = false;
            })
        },
        handleClickJob(id,index){
            let loading = this.$toast.loading();
            let url = this.$api_url.order_add
            //let url = "https://js.99ms.net/api/v1/task/add";
            this.$axios.post(url,this.$qs.stringify({
                task_id: id
            })).then((res)=>{
                if(res.data.code == 0){
                    const newData = this.data.filter(item => item.id !== id)
                    this.data = newData;
                    this.$toast.success(res.data.msg);
                } else{
                    this.$toast.fail(res.data.msg);
                    switch(res.data.code){
                        case -1:
                            break;
                        case -2:
                            location.href="/#/bind_account";
                            break;
                        case -3:
                            location.href="/#/member";
                            break;
                    }
                }
            }).catch((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
                loading.hide();
            })
        },
        handleClickReview(target){
            if(target.url){
                this.review_url = target.url;
                this.showReviewDialog = true;
            } else{
                this.$toast.fail(this.$t("TaskPage.bzcyl")+'!');
            }
        },
        handleClickViewDesc(html){
            this.review_desc = html;
            this.showReviewDescDialog = true;
        },
        handleClickViewMoment(text,imgs){
            this.reviewMoment.text = text;
            if(imgs){
                this.reviewMoment.imgArr = imgs.split(',');
            }
            this.showReviewMomentDialog = true;
        },
        callbackCloseScope(){
            this.showSelectScope = false;
        },
        callbackCloseType(){
          this.showSelectType = false;
        },
    },
    mounted() {
        let type_it = this.$route.query.type;
        if(type_it){
            if(type_it >= 0 && type_it < typeArr.length){
                this.curr_type_index = type_it;
                this.curr_type = typeArr[this.curr_type_index];
            }
        }
        this.getCards();
        this.getData();
        // if(window.webkit){
        //     window.webkit.messageHandlers.JSObject.postMessage("show");
        // }
    },
    // watch:{
    //     sel_group(val){
    //         //this.getData();
    //     }
    // }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .page-box{
    padding-top:6rem;
    padding-bottom: 1rem;
    font-size:0.4rem;
  }
  .top-group{
    position: fixed;
    top:4rem;
    left:0;
    width:100%;
    padding:0.5rem 0;
    background-color: #fff;
    z-index: 1;
    border-bottom:thin solid #ddd;
  }
  .task-list{
    text-align: left;
    width:100%;
  }
  .bottom-tips{
    height:3rem;
    line-height:3rem;
  }
  .reward{
    font-size:2.4rem;
    float:right;
    position: relative;
    right:1rem;
    top:2rem;
  }
  .task-level{

  }
  .list{
    padding:0.2rem;
  }
  .list-item{
    text-align: left;
    padding:0.1rem;
    background-color: #fff;
    margin: 0.4rem 0;
    border-radius: 0.1rem;
    box-shadow: 0 0 0.3rem #aaa;
    position: relative;
  }
  .task-img{
    width:1rem;
    height:1rem;
  }
  dl{
    padding:0;
    margin:0;
  }
  dd{
    margin:0;
  }
  .price-box{
    margin-top:0.2rem;
    margin-bottom:0.4rem;
    overflow:hidden;
  }
  .remain_cnt{
    position: relative;
    top:0.22rem;
  }
  .price{
    font-size:0.7rem;
    margin-right:0.1rem;
    font-weight: 800;
    float:right;
    position: relative;
    right:-0.12rem;
  }
  .btn-join{
    padding:0.2rem;
    cursor: pointer;
    background-color: #6892a9;
    color:#fff;
    border-radius: 0.1rem;
    position: absolute;
    right: 0.3rem;
    bottom: 0.4rem;
  }
  .btn-yellow{
    /* width: 100%; */
    padding: 0.2rem;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.45);
    -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.45);
    -o-text-shadow: 0 0 1px rgba(0, 0, 0, 0.45);
    -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.45);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 7px #bf6000, 0 8px 2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 7px #bf6000, 0 8px 2px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 7px #bf6000, 0 8px 2px rgba(0, 0, 0, 0.4);
    -khtml-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 7px #bf6000, 0 8px 2px rgba(0, 0, 0, 0.4);
    border-width: 1px 1px 0;
    border-style: solid;
    border-color: #ff8a00;
    /* border-radius: 30px; */
    -moz-border-radius: 30px;
    /* -webkit-border-radius: 30px; */
    -khtml-border-radius: 30px;
    background: -moz-linear-gradient(top, #ffdd00 0%, #ff7f00 100%);
    background: -webkit-linear-gradient(top, #ffdd00 0%, #ff7f00 100%);
    background: -o-linear-gradient(top, #ffdd00 0%, #ff7f00 100%);
    background: -ms-linear-gradient(top, #ffdd00 0%, #ff7f00 100%);
    background: linear-gradient(to bottom, #ffdd00 0%, #ff7f00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdd00', endColorstr='#ff7f00', GradientType=0);
    background-color: #ff9700;
    font-size: 0.35rem;
    direction: ltr;
  }
  .btn-yellow:active {
    bottom: 0.4rem;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 2px #bf6000, 0 3px 2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 2px #bf6000, 0 3px 2px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 2px #bf6000, 0 3px 2px rgba(0, 0, 0, 0.4);
    -khtml-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 2px #bf6000, 0 3px 2px rgba(0, 0, 0, 0.4);
  }
  .btn-yellow:hover {
    bottom: 0.3rem;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 4px #bf6000, 0 5px 2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 4px #bf6000, 0 5px 2px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 4px #bf6000, 0 5px 2px rgba(0, 0, 0, 0.4);
    -khtml-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 4px #bf6000, 0 5px 2px rgba(0, 0, 0, 0.4);
  }

  .task-time{
    color:#aaa;
  }
  .group-box{
    width:100%;
  }
  .group-box li{
    width:33%;
    text-align: center;
    float:left;
  }
  .group-box img{
    width:0.7rem;
    height:0.7rem;
  }
  .view-desc{
    cursor: pointer;
    color: orange;
  }
  .payed{
    color: #b17405;
  }
  .moment-imgs{
    overflow: hidden;
  }
  .moment-imgs ul li{
    float: left;
    margin: 0.1rem;
    border: thin dashed #ccc;
    padding: 0.1rem;
    border-radius: 0.1rem;
  }
  .moment-imgs ul li img{
    width:3.3rem;
  }
  .moment-text{
    border: thin solid #ddd;
    padding: 0.2rem;
    margin-bottom: 0.4rem;
    border-radius: 0.1rem;
    overflow: hidden;
    margin-top:0.4rem;
  }
  .moment-text ul li{
    float: left;
    width:50%;
    text-align: center;
    height: 1rem;
    line-height: 1rem;
  }
  .review-box{
    text-align: left;
    padding:1rem;
  }
  .review-box img{
    max-width: 100%;
  }
</style>
